<template>
	<div>
		<el-dialog title="积分累积记录" :visible.sync="dialogVisible" width="1000px" :before-close="handleClose"
			:close-on-click-modal="false">
			<div>
				<el-form :inline="false" :model="formInline" ref="people-more-recharge" :rules="formRules"
					class="demo-form-inline" label-width="100px">
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item label="充值类型:">
								  <el-select v-model="formInline.title" placeholder="请选择充值类型">
									<el-option value="1" label="充值"></el-option>
									<el-option value="2" label="回退"></el-option>
								  </el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				
				<el-table v-loading="tableLoading" :data="tableData">
					<el-table-column show-overflow-tooltip label="序号" width="120" align="center" prop="couponName" />
					<el-table-column show-overflow-tooltip label="充值金额" min-width="200" align="center" prop="couponName" />
					<el-table-column show-overflow-tooltip label="充值类型" min-width="200" align="center" prop="couponName" />
					<el-table-column show-overflow-tooltip label="操作人" min-width="120" align="center" prop="couponName" />
					<el-table-column show-overflow-tooltip label="操作时间" min-width="140" align="center" prop="couponName" />
				</el-table>
				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
					@pagination="getList" />
			</div>


			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		updataWcBanner,
		addWcBanner,
		findWcBanner,
	} from "@/api/culturalCreativity/configureBanner.js";
	let _this;
	export default {
		data() {
			return {
				id: null,
				dialogVisible: false,
				formRules: {
					title: {
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					},
					picUrl: {
						required: true,
						message: '请上传图片给',
						trigger: 'change'
					},
					sort: {
						required: true,
						message: '请输入排序',
						trigger: 'blure'
					},
					state: {
						required: true,
						message: '请选择状态',
						trigger: 'change'
					}
				},
				total:0,
				tableData:[],
				queryParams:{
					pageNum: 1,
					pageSize: 10
				},
				tableLoading:false,
				formInline: {},
				loadingScreen: null,
				fileName: '',
			}
		},
		methods: {
			async init(id) {
				try {
					_this = this;
					this.title = '';
					this.resetFrom();
					this.dialogVisible = true;
					if (!id) return;
					let res = await findWcBanner(id);
					this.formInline.id = id;
					Object.keys(this.formInline).forEach(item => {
						this.formInline[item] = res.data[item];
					});
				} catch (e) {
					//TODO handle the exception
				}
			},
			resetFrom() {
				this.formInline = {
					title: "",
					picUrl: "",
					sort: "",
					state: "",
					goodsId: ""
				}
				if (this.$refs['people-more-recharge']) this.$refs['people-more-recharge'].resetFields();
			},
			getList(){
				this.tableData = [];
			},
			handleClose() {
				this.dialogVisible = false;
			},
		},
		created() {
			this.resetFrom();
		},
		computed: {}
	}
</script>
<style lang="scss" scoped>
	::v-deep .el-input__inner {
		text-align: left;
	}

	.width100 {
		width: 590px;
	}

	.cell-input {
		width: 330px;
	}

	.up-file-wrappar {
		display: flex;
		align-items: center;
	}

	.total-day {
		display: inline-block;
		height: 36px;
		width: 40px;
		margin: 0 6px;
		text-align: center;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.up-file-name {
		display: inline-block;
		height: 36px;
		min-width: 555px;
		text-align: left;
		line-height: 36px;
		box-sizing: border-box;
		padding: 0 15px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		color: #606266;
		font-size: inherit;

		.text {
			display: -webkit-box;
			overflow: hidden;
			white-space: normal !important;
			text-overflow: ellipsis;
			word-wrap: break-word;
			-webkit-line-clamp: 1; //行数
			-webkit-box-orient: vertical;
			max-width: 555px;
		}
	}
</style>
